<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

          <div class="block">
            <el-form-item :label="$t('errorSearch.errorReportDate')" prop="errorReportDate">
              <el-date-picker v-model="errorReportDate" clearable type="daterange" unlink-panels
                              range-separator="To" start-placeholder="Start date" end-placeholder="End date"
                              :shortcuts="shortcuts"/>
            </el-form-item>
            <!--工序，产线，物料 -->
            <el-form-item :label="$t('errorSearch.productionLineCode')">
              <el-input v-model="state.queryForm.productionLineCode" clearable
                        :placeholder="$t('errorSearch.productionLineCode')"/>
            </el-form-item>
            <el-form-item :label="$t('errorSearch.processCode')">
              <el-input v-model="state.queryForm.processCode" clearable
                        :placeholder="$t('errorSearch.processCode')"/>
            </el-form-item>
            <el-form-item :label="$t('errorSearch.materialCode')">
              <el-input v-model="state.queryForm.materialCode" clearable
                        :placeholder="$t('errorSearch.materialCode')"/>
            </el-form-item>
            <el-form-item :label="$t('errorSearch.operatorNo')">
              <el-input v-model="state.queryForm.operatorNo" clearable
                        :placeholder="$t('errorSearch.operatorNo')"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search"  @click="query"> {{ $t('so.query') }}</el-button>
              <el-button icon="refresh"  @click="resetQuery">{{ $t('so.reset') }}</el-button>
              <el-button type="success" icon="Download" plain @click="exportCard">
                {{ $t('common.exportBtn') }}
              </el-button>
            </el-form-item>
          </div>


        </el-form>

        <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                  style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
                  :header-cell-style="tableStyle.headerCellStyle">

          <el-table-column type="index" label="#" width="80"/>
          <el-table-column :label="$t('errorSearch.errorReportDate')" prop="errorReportDate" width="180"/>
          <el-table-column :label="$t('errorSearch.processCode')" prop="processCode" width="100"/>
          <el-table-column :label="$t('errorSearch.processName')" prop="processName" width="100"/>
          <el-table-column :label="$t('errorSearch.productionLineCode')" prop="productionLineCode"
                           width="150px"/>
          <el-table-column :label="$t('errorSearch.materialCode')" prop="materialCode" width="100"/>
          <el-table-column :label="$t('errorSearch.materialName')" prop="materialName" width="200"/>
          <el-table-column :label="$t('errorSearch.materialSpec')" prop="materialSpec" width="300"/>
          <el-table-column :label="$t('errorSearch.errorCauseCode')" prop="errorCauseCode" width="120"/>
          <el-table-column :label="$t('errorSearch.errorCauseName')" prop="errorCauseName" width="120"/>
          <el-table-column prop="errorQty" :label="$t('errorSearch.errorQty')" show-overflow-tooltip >
              <template #default="scope">
                <el-tag type="warning" effect="dark">
                  {{ scope.row.errorQty }}
                </el-tag>
              </template>
            </el-table-column>
          <el-table-column prop="isPdaCommit" :label="$t('errorSearch.isPdaCommit')" show-overflow-tooltip
                           width="150px">
            <template #default="scope">
              <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag :type="scope.row.isPdaCommit === 'Y' ? 'success' : 'danger'" :effect="scope.row.isPdaCommit === 'Y' ? 'dark' : 'light'">
                {{ scope.row.isPdaCommit }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isCreateConsume" :label="$t('errorSearch.isCreateConsume')" show-overflow-tooltip
                           width="150px">
            <template #default="scope">
              <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag :type="scope.row.isCreateConsume === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateConsume === 'Y' ? 'dark' : 'light'">
                {{ scope.row.isCreateConsume }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isErpSuccess" :label="$t('errorSearch.isErpSuccess')" show-overflow-tooltip
                           width="150px">
            <template #default="scope">
              <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag :type="scope.row.isErpSuccess === 'Y' ? 'success' : 'danger'" :effect="scope.row.isErpSuccess === 'Y' ? 'dark' : 'light'">
                {{ scope.row.isErpSuccess }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isCreateJob" :label="$t('errorSearch.isCreateJob')" show-overflow-tooltip
                           width="150px">
            <template #default="scope">
              <!--根据不同的状态选择不同的颜色的tag-->
              <el-tag :type="scope.row.isCreateJob === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateJob === 'Y' ? 'dark' : 'light'">
                {{ scope.row.isCreateJob }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('errorSearch.batchNo')" prop="batchNo" width="150px"/>
          <el-table-column :label="$t('errorSearch.errorEndTime')" prop="errorEndTime" width="200"/>
          <el-table-column :label="$t('errorSearch.bussinessDate')" prop="bussinessDate" width="200"/>
          <el-table-column :label="$t('errorSearch.shiftName')" prop="shiftName" width="150px"/>
          <el-table-column :label="$t('errorSearch.shiftCode')" prop="shiftCode" width="150px"/>
          <el-table-column :label="$t('errorSearch.operatorName')" prop="operatorName" width="150px"/>
          <el-table-column :label="$t('errorSearch.operatorNo')" prop="operatorNo" width="150px"/>
          <el-table-column :label="$t('errorSearch.reportStatus')" prop="reportStatus" width="150px"/>
        </el-table>

        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                    v-bind="state.pagination"/>
      </div>
  </div>
</template>


<script setup lang="ts">
import {BasicTableProps, useTable} from '/@/hooks/table';
import {getMesErrorRecords} from '/@/api/platform/report/errorSearch';
import {reactive, ref} from 'vue';
import {useI18n} from 'vue-i18n';

const {t} = useI18n();

const getYMD = (date: any) => {
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 yyyy-MM-dd 格式的字符串
  const formattedDate = `${year}-${month}-${day}`;

  return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const errorReportDate = ref([endDate, today]);
// 搜索变量
const tableRef = ref();
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];


// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    StartDate: errorReportDate.value ? getYMD(errorReportDate.value[0]) : '',
    EndDate: errorReportDate.value ? getYMD(errorReportDate.value[1]) : '',
  },
  pageList: getMesErrorRecords,
});

const {tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile} = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  errorReportDate.value = '';
  state.queryForm.StartDate = '';
  state.queryForm.EndDate = '';
  getDataList(false);
};

const query = () => {
  state.queryForm.StartDate = errorReportDate.value ? getYMD(errorReportDate.value[0]) : '';
  state.queryForm.EndDate = errorReportDate.value ? getYMD(errorReportDate.value[1]) : '';
  getDataList();
};
const exportCard = () => {
  downBlobFile('/wms/errorReport/ExportErrorReport', {
    "StartDate": state.queryForm.CreateDateStart,
    "EndDate": state.queryForm.CreateDateEnd
  }, 'ErrorRecord.xlsx');
}
</script>